<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">


    <head th:include="common/common::header">
    </head>

<body>
<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite>
		</a> </span> <a class="layui-btn layui-btn-small"
                        style="line-height:1.6em;margin-top:3px;float:right"
                        href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon" style="line-height:30px">&#xe666</i>
</a>
</div>
<div style="height: 100px; padding-top: 30px;padding-left: 100px;padding-right: 100px">
    <p style="font-size: 32px">信息填写进度</p><br>
    <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
        <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
    </div>
</div>

<!----------------------------form表单显示个人信息------------------------------------>
<form shiro:hasPermission="user_empty" class="layui-form" id="fff" action="/dangxia/user/changeToEmptyRoom">
    <div style="margin-left: 150px" id="user-one">
    <div class="layui-form-item">
        <label for="username" class="layui-form-label"> 用户账号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="username" name="username"
                   lay-verify="required"  autocomplete="off" class="layui-input" placeholder="请输入用户账号">
        </div>
        <label for="payphone" class="layui-form-label"> 支付宝账号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="payphone" name="payphone"
                   autocomplete="off" class="layui-input" disabled>
        </div>
        <label for="id" class="layui-form-label"> 用户编号 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="id" name="id" readonly
                   autocomplete="off" class="layui-input">
        </div>
        <label for="uname" class="layui-form-label"> 用户姓名<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="uname" name="name" disabled
                   autocomplete="off" class="layui-input">
        </div>

    </div>

    <div class="layui-form-item">
        <label for="userSex" class="layui-form-label"> 性别 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="userSex" name="userSex" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="userCard" class="layui-form-label"> 身份证号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="userCard" name="userCard" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="startTime" class="layui-form-label"> <span
                class="x-red"></span>入住时间 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="startTime" name="startTime" disabled
                   autocomplete="off" class="layui-input">
        </div>
        <label for="endTime" class="layui-form-label"> <span
                class="x-red"></span>到期时间 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="endTime" name="endTime" disabled
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="roomNumber" class="layui-form-label"> 房间号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="roomNumber" name="roomNo" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="bedNum" class="layui-form-label"> 床位号<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="bedNum" name="bedNum" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="roomType" class="layui-form-label"> 房间类型<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="roomType" name="roomType" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="roomSize" class="layui-form-label"> 房间大小 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="roomSize" name="roomSize" disabled
                    autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="deposit" class="layui-form-label"> 交纳押金<span class="x-red">*</span> </label>
        <div class="layui-input-inline">
            <input type="text" id="deposit" name="deposit" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="payType" class="layui-form-label"> 交租方式 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="payType" name="payType" disabled
                    autocomplete="off" class="layui-input">
        </div>
        <label for="userAddr" class="layui-form-label"> 个人所在地 <span class="x-red">*</span></label>
        <div class="layui-input-inline">
            <input type="text" id="userAddr" name="userAddr" disabled
                    autocomplete="off" class="layui-input">
        </div>
    </div>
    </div>
    <hr>
    <div style="margin-left: 150px;margin-top: 40px;" id="user-two" >
        <div class="layui-form-item">
            <label  class="layui-form-label"> 床位信息<span class="x-red">*</span></label>
                <div class="layui-input-inline" style="width: 200px">
                    <select name="areaid" id="area" lay-verify="required" lay-filter="area">
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="buildid" id="build" lay-verify="required" lay-filter="build" style="">
                        <option value="" selected>请选择楼栋</option>
                    </select>
                </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="roomid" id="room" lay-verify="required" lay-filter="room" style="">
                    <option value="" selected>请选择房间</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="bedid" id="bed" lay-verify="required" lay-filter="bed" style="">
                    <option value="" selected>请选择床位</option>
                </select>
            </div>
        </div>

        <div shiro:hasPermission="user_empty" class="layui-form-item" style="margin-top: 200px">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="changeToEmpty">确认更换</button>
            <button type="reset"  class="layui-btn layui-btn-primary">重置</button>
        </div>
        </div>
    </div>
</form>


    <script th:inline="none">
        layui.use(['element','form','layer'], function() {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块


        //触发事件
        function setPercent(size) {
            //设置50%进度
            element.progress('demo', size);

        }
            /*-----------------------选择空房的信息----------------------------------*/
        /*将小区信息添加到下拉列表*/
        getAreaList("#area");
        form.render('select');
        areaLinkBuild('area','#build');
        areaLinkRoom('build','#room');
            areaLinkBed('room','#bed');
        /*小区楼栋联动*/
        function areaLinkBuild(filter,idname){
            /*监听form*/
                form.on('select('+filter+')',function(data) {
                    /*根据选中的小区获得该小区下的所有楼栋*/
                    var areaid = data.value;
                    $(idname).empty();
                    $("#room").empty();
                    $("#bed").empty();
                    $.post(
                        "/dangxia/build/getBuildByAreaId",
                        {"areaId":areaid},
                        function(buildInfos) {
                            $.each(buildInfos,function(index,buildInfo) {
                                $(idname).append(
                                    "<option value='"+buildInfo.id+"'>"+buildInfo.building_name+"</option>"
                                );
                            });
                            form.render('select');
                        }
                    );
                });
        }
            /*楼栋和房间联动*/
            function areaLinkRoom(filter,idname){
                /*监听form*/
                form.on('select('+filter+')',function(data) {
                    /*根据选中的楼栋获得该楼栋下的所有房间*/
                    var roomType;
                    //alert($("#roomType").val());
                    if ($("#roomType").val()=='男寝'){
                        roomType=1;
                    }else{
                        roomType=0;
                    }
                    //alert(roomType);
                    var buildid = data.value;
                    $(idname).empty();
                    $("#bed").empty();
                    $.post(
                        "/dangxia/user/getRoomByBuildId",
                        {
                            "buildid":buildid,
                            "roomType":roomType

                        },
                        function(roomInfos) {
                            $.each(roomInfos.data,function(index,roomInfos) {
                                $(idname).append(
                                    "<option value='"+roomInfos.id+"'>"+roomInfos.roomNo+"</option>"
                                );

                            });
                            form.render('select');
                        }
                    );
                });
            }
            /*房间和床位联动*/
            function areaLinkBed(filter,idname){
                /*监听form*/
                form.on('select('+filter+')',function(data) {
                    /*根据选中的楼栋获得该楼栋下的所有房间*/
                    var roomid = data.value;
                    $(idname).empty();
                    $.post(
                        "/dangxia/user/getBedByBuildId",
                        {"roomid":roomid},
                        function(bedInfos) {
                            $.each(bedInfos.data,function(index,bedInfos) {
                                $(idname).append(
                                    "<option value='"+bedInfos.id+"'>"+bedInfos.bedNum+"</option>"
                                );

                            });
                            setPercent("100%");
                            form.render('select');
                        }
                    );
                });
            }
            /*得到小区信息*/
        function getAreaList(idname) {

                $.post(
                    "/dangxia/build/getAllArea",
                    {},
                    function(data1) {
                        $(idname).empty();
                        $(idname).append(
                            "<option value=''>请选择小区</option>"
                        );
                        for(var i=0;i<data1.length;i++) {
                            $(idname).append(
                                "<option value='"+data1[i].id+"'>"+data1[i].areaName+"</option>"
                            );
                        }
                        form.render('select');
                    }
                );

        }
        /*--------------------第一个人的时间---------------------------*/
        $("#username").blur(function(){
            $.post('/dangxia/user/getInfoByUsername',{
                username:$("#username").val()
            },function (data) {
                if (data.code == 1) {
                    msg1("没有此人信息！");
                    $("#fff")[0].reset();
                    setPercent('0%');
                    return false;
                } else {
                    setPercent('50%');
                    $("#id").val(data.id);
                    $("#uname").val(data.name);
                    //$("#username").val(data.username);
                    $("#userAddr").val(data.userAddr);
                    $("#userCard").val(data.userCard);
                    $("#deposit").val(data.deposit);
                    $("#payphone").val(data.payphone);
                    $("#startTime").val(data.startTime);
                    $("#endTime").val(data.endTime);
                    $("#payType").val(data.payType);
                    $("#roomNumber").val(data.roomNo);
                    $("#roomType").val(data.roomType);
                    $("#roomSize").val(data.roomSize);
                    $("#bedNum").val(data.bedNum);
                    if (data.userSex == 0) {
                        $("#userSex").val('女');
                    } else {
                        $("#userSex").val('男');
                    }
                    ;
                    if (data.roomType == 0) {
                        $("#roomType").val('女寝');
                    } else {
                        $("#roomType").val('男寝');
                    }
                    ;
                    if (data.roomSize == 8) {
                        $("#roomSize").val('八人间');
                    } else {
                        $("#roomSize").val('十人间');
                    }
                    ;
                    if (data.payType == 0) {
                        $("#payType").val('每月交租');
                    } else {
                        $("#payType").val('免租');
                    }
                    ;
                }
            });
        });


        /*-------------------点击事件事件---------------------*/
        form.on('submit(changeToEmpty)', function(data){
            $("#fff").ajaxForm(function (data) {
                if (data.code==0){
                    //msg1("更换房间成功，可前去查看！");
                    if(confirm("更换房间成功！是否前去查看？")){
                        window.location.href='http://localhost:8080/dangxia/user/toGetAll';
                    }else {
                        $("#fff")[0].reset();
                        $("#build").empty();
                        $("#room").empty();
                        $("#bed").empty();
                        setPercent('0%');
                    }
                }
            })

        });
        function msg1(message){
            //配置一个透明的询问框
            layer.msg(message, {
                time: 3000 //20s后自动关闭
               //btn: ['ok','close']
            });
        }
        });
    </script>
</body>
</html>